$mci-border-base: var(--color-line-3);
$mci-hover-border-base: var(--color-line-2);
$mci-color-danger: var(--color-danger-6);
$mci-color-primary: var(--color-brand-6);
$mci-text-color-placeholder: var(--color-text-3);
$mci-input-text-color: var(--color-text-5);

.mci-input-read {
  --el-border-base: #{$mci-border-base};
  --el-input-border-color: #{$mci-border-base};
  --el-border-color-hover: #{$mci-hover-border-base};
  --el-color-danger:  var(--color-fill-2) !important;
  --el-color-primary: #{$mci-color-primary};
  --el-text-color-placeholder: #{$mci-text-color-placeholder};
  --el-input-text-color: #{$mci-input-text-color};
  --el-input-bg-color: var(--color-fill-2);
  --el-input-focus-border-color: var(--color-fill-2) !important;
  --el-input-hover-border-color: var(---color-fill-2) !important;

  .el-input__inner {
    border: 1px solid var(--color-fill-2);
    background-color: var(--color-fill-2);
  }

  // 为 append 添加与 input 输入框相同交互的边线
  .el-input-group__append {
    cursor: pointer;
    // border-radius: 0;
    // padding-right: 0;
    color: var(--color-text-5);
    background-color: var(--color-fill-4);
    // box-shadow: none;
    // transition: var(--el-transition-box-shadow);
  }
  &.is-uppercase {
    .el-input__inner {
      text-transform: uppercase;
    }
  }

  &.mci-single-line {
    .el-input-group__append {
      box-shadow: 0px 1px 0px 0px var(--el-input-border-color);
    }
    &:hover {
      .el-input-group__append {
        box-shadow: 0px 1px 0px 0px var(--el-input-hover-border-color);
      }
    }
    .el-input__inner {
      &:hover + .el-input-group__append {
        box-shadow: 0px 1px 0px 0px var(--el-input-hover-border-color);
      }
      &:focus + .el-input-group__append {
        box-shadow: 0px 1px 0px 0px var(--el-input-focus-border-color);
      }
    }
  }
}
.input_view {
  white-space: pre-wrap;
  word-break: break-word;
  &.textarea-view {
    line-height: 2;
  }
}
.is-error {
  .mci-single-line {
    .el-input-group__append {
      box-shadow: 0px 1px 0px 0px var(--el-color-danger) !important;
    }
  }
}

